<template>
  <div>
    <!-- 批量添加 -->
    <Dialog :appDialog="appDialog" @close="close">
      <div >
        <el-tabs v-model="activeName">
          <el-tab-pane label="个人线索" name="1">
            <el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
              <el-form-item label="上传文件" prop="code" class="upload_file">
                <UploadFile @submit="(v) => (form.code = v.code)" @del="form.code = ''" />
              </el-form-item>
              <el-form-item label="公海池" required prop="clue_seas_id">
                <el-select v-model="form.clue_seas_id" placeholder="请选择线索公海">
                  <el-option v-for="item in seaids" :value="item.id" :key="item.id" :label="item.name">{{ item.name }}</el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="企业线索" name="2">
            <el-form ref="formRef2" :model="form2" :rules="rules" label-width="auto">
              <el-form-item label="上传文件" prop="code">
                <UploadFile :type="2" @submit="(v) => (form2.code = v.code)" @del="form2.code = ''" />
              </el-form-item>
              <el-form-item label="公海池" required>
                <el-select v-model="form2.clue_seas_id" placeholder="请选择线索公海">
                  <el-option v-for="item in seaids" :value="item.id" :key="item.id" :label="item.name">{{ item.name }}</el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
        <div class="contain">
          <div>
            1、文件必须为xlsx格式（如果为xls格式请另存为xlsx格式）<br />
            2、不支持导入存在多个工作表的文件，默认只导入第一个工作表 <br />
            3、同一个客户，在一个单元格里不支持填入多个手机号 <br />
            4、尽量避免合并单元格，否则导入可能存在异常 <br />
            5、文件内容不能包含公式，否则可能会影响导入结果<br />
            6、导入时异步处理了，只要提交就会在后台进行导入操作，请在导入任务中查看详情
          </div>
        </div>
      </div>
    </Dialog>
  </div>
</template>
<script lang="ts" setup>
  import UploadFile from './UploadFile.vue'
  import { ref, reactive, watch } from 'vue'
  import { ElMessage } from 'element-plus'
  import Dialog from '@/components/Dialog.vue'
  import { seaList, batchAdd } from '@/api/customer/clubManage/commonSea'
  const props = defineProps(['isopen', 'seas_id'])
  const activeName = ref('1')
  const emit = defineEmits(['close', 'submit'])
  const form = reactive({ type: 1, clue_seas_id: '', code: '' })
  const form2 = reactive({ type: 2, clue_seas_id: '', code: '' })
  const formRef = ref<any>(null)
  const formRef2 = ref<any>(null)
  const rules = reactive({
    code: [{ required: true, message: '请上传文件', trigger: 'blur' }],
    clue_seas_id: [{ required: true, message: '请选择线索公海', trigger: 'blur' }]
  })
  const cancelBatch = () => {
    appDialog.visible = false
    form.code = ''
    form2.code = ''
    emit('close')
  }
  const onSubmit = (v: any) => {
    batchAdd(v).then((res: any) => {
      ElMessage.success(res.msg)
      appDialog.visible = false
      emit('submit')
      emit('close')
    })
  }
  const submitBatch = () => {
    if (activeName.value == '1') {
      if (!formRef.value) return
      formRef.value.validate((valid: any) => {
        if (valid) {
          onSubmit(form)
        }
      })
    } else {
      if (!formRef2.value) return
      formRef2.value.validate((valid: any) => {
        if (valid) {
          onSubmit(form2)
        }
      })
    }
  }
  const appDialog = reactive<any>({
    visible: false,
    label: '上传文件',
    title: '导入线索',
    width: '800px',
    cancel: cancelBatch,
    submit: submitBatch,
    cancelText: '取消',
    submitText: '确定'
  })

  const seaids = ref<any>([]) //公海列表
  //获取公海列表
  const getSeaList = () => {
    seaids.value = []
    seaList({ page: 1, page_size: 1000, is_not_list: 1 }).then((res: any) => {
      seaids.value = res.data
    })
  }
  const close = () => {
    emit('close')
  }
  watch(
    () => props.isopen,
    (val) => {
      if (val) {
        getSeaList()
        form.clue_seas_id = props.seas_id
        form2.clue_seas_id = props.seas_id
        appDialog.visible = val
      }
    }
  )
</script>
<style scoped lang="scss">
  .contain {
    padding: 10px 16px;
    background: #fffaf9;
    border-radius: 4px;
    font-size: 14px;
    font-family: STHeitiSC-Light, STHeitiSC;
    font-weight: 300;
    color: #696969;
    line-height: 20px;
  }
  .upload_file {
    margin-bottom: 0;
  }
  :deep(.el-tabs__header) {
    margin-bottom: 24px;
  }
  :deep(.el-dialog__body) {
    padding-bottom: 24px;
  }
</style>
